<!--
 * @Author: your name
 * @Date: 2021-05-31 21:39:34
 * @LastEditTime: 2021-06-29 22:56:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \JS高级学习\js\process\14.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>后盾人</title>
</head>

<body>
  <style>
    ul {
      list-style: none;
    }

    li {
      border: solid 1px #ddd;
      height: 50px;
      width: 200px;
    }
  </style>
  <input type="text">
  <button desc="hdcms">button</button>
  <!-- <div id="content">
    <div class="btn-container">
      <a class="btn" href="#anchor1">锚点1</a>
      <a class="btn" href="#anchor2">锚点2</a>
      <a class="btn" href="#anchor3">锚点3</a>
    </div>
    <div id="anchor1" class="anchor-con">anchor1</div>
    <div id="anchor2" class="anchor-con">anchor2</div>
    <div id="anchor3" class="anchor-con">anchor3</div>
  </div> -->



  <br />







  <a href="#2">16156156</a>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <a name="i">16156156</a>


  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <div id='2'>785385</div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <ul id='ii'>
    <li>5</li>
    <li>5</li>
    <li>5</li>
  </ul>

  <script>
    let Dom = {
      site: "后盾人",
      bind() {
        console.log(this);
        const button = document.querySelector("button");
        button.addEventListener("click", (event) => {
          console.log(this, event.target);
        });
      }
    };
    Dom.bind()

    const inp = document.querySelector('input')
    inp.addEventListener('input', debounce(function (num) {
      console.log(this);
    }, 500))
    
    function debounce(fn, delay, isFirstRun = true) {
      let timeOut = null;
      let flag = true;
      return function () {
        if (isFirstRun && flag) {
          fn.call(this)
          flag = false
        }
        if (timeOut) clearTimeout(timeOut)
        setTimeout(() => {
          fn.call(this)
        }, delay)
      }
    }

    function throttle(fn, delay, isFirstRun = true) {
      let timeOut = null;
      return function () {
        const _this = this;
        if (isFirstRun) {
          fn.call(_this)
          isFirstRun = false
        }
        if (!timeOut) {
          timeOut = setTimeout(function () {
            fn.call(_this)
            timeOut = null
          }, delay)
        }

      }
    }
    function throttle1(fn, delay, isFirstRun = true, arg) {
      let isRun = true;
      return function () {
        const _this = this;
        if (isRun && isFirstRun) {
          fn.call(_this, arg)
          isFirstRun = false
        }
        if (isRun) {
          isRun = false
          timeOut = setTimeout(function () {
            fn.call(_this, arg)
            isRun = true
          }, delay)
        }

      }
    }



    // let str = 'hged.h'
    // // console.log(str.split('.'));
    // const obj = {
    //   name: "llq",
    //   age: 18
    // }
    // // delete obj.name
    // obj.name = 'd'
    // console.log(obj);
      // let lis = document.querySelectorAll("li");
      // for (const li of lis) {
      //   li.addEventListener("click", function() {
      //     li.style.backgroundColor = "red";
      //   });
      // }
      // let hd = [
      //   { title: "第一章 走进JAVASCRIPT黑洞", lesson: 3 },
      //   { title: "ubuntu19.10 配置好用的编程工作站", lesson: 5 },
      //   { title: "媒体查询响应式布局", lesson: 8 }
      // ];
      // document.write(`
      //   <table border="1" width="100%">
      //   <thead><tr><th>标题</th><th>课程数量</th></thead>
      // `);
      // for (let video of hd) {
      //   document.write(`
      //   <tr><td>${video.title}</td><td>${video.lesson}</td></tr>
      //   `);
      // }
      // document.write("</table>");

      // let houdunren = ["hdcms", "houdunren.com"];
      // for (let key in houdunren) {
      //   console.log(houdunren[key]);
      // }

      // for (let key in window) {
      //   console.log(key);
      //   // console.log(window[key]);
      // }
      // let houdunren = ["hdcms", "houdunren.com"];
      // for (const value of houdunren) {
      //   console.log(value);
      // }

      // for (let v of "houdunren") {
      //   console.log(v);
      // }
  </script>
</body>

</html>